<template>
	<view>
		<!-- 顶部导航 -->
		<scroll-view class="top_nav" scroll-x enable-flex :scroll-into-view="`cate-${titleIndex > 2 ? titleIndex - 2 : -1}`"
			scroll-with-animation>
			<view class="item" v-for="item in tabbar" :key="item.id" :id="`cate-${item.id}`">
				<view class="item_view " :class="titleIndex == item.id ? 'active' : ''" @click="topNav(item)">
					<view v-if="currindex==0">{{ item.value }}</view>
					<view v-else>{{ item.jifen }}</view>
					<view class="gun"></view>
				</view>
			</view>
		</scroll-view>

		<None v-if="!list.length && !loading && isEnd"></None>
		<!-- 商品状态 -->
		<view class="goods_status" v-for="(item, index) in list" :key="`order-${item.id}`">
			<view class="number">
				<view class="left"><text>订单编号：</text><text>{{ item.order_sn }}</text></view>
				<!-- order_type  1商城订单 2积分订单 -->
				<view class="right">{{ item.status | statusFilter }}</view>
			</view>
			<view class="info" @click="todetail(list[index].id)" v-for="(ite, inde) in item.goods" :key="`goods-${index}-${inde}`">
				<image :src="ite.url"></image>
				<view class="title">
					<view class="title_item">
						<view class="title_left">{{ ite.goods_name }}</view>
						<view class="title_right" v-if="item.order_type==1">
							<text>￥{{ ite.goods_price }}</text>
							<text>X{{ ite.goods_num }}</text>
						</view>
						<view class="title_right" v-else>
							<text>{{ ite.goods_price }}积分</text>
							<text>X{{ ite.goods_num }}</text>
						</view>
					</view>
					<view class="small_title">{{ ite.spec_name }}</view>
				</view>
			</view>
			<view class="price" v-if="item.order_type==1"><text>共{{ getTotal(item.goods) }}件商品</text><text>需付款￥{{ item.pay_money }}</text></view>
			<view class="price" v-else><text>共{{ getTotal(item.goods) }}件商品</text><text>需{{ item.pay_money }}积分</text></view>
			<view class="btns" v-if="item.status !== 4">
				<!-- //0待付款 1待发货/待自提 2待收货/已自提 3待评价  4已取消  5售后退款中  6已完成  7售后完成 -->
				<view class="btn_left" v-if="list[index].delivery_method==2&&item.status == 1" @click.stop="navOrderDatails(list[index])">出示自提码</view>
				<view class="btn_left" v-if="item.status == 0" @click.stop="cancelOrder(list[index].id)">取消订单</view>
				<!-- <view class="btn_left" @click="logistics">查看物流</view> -->
				<view class="btn_left" v-if="item.status == 2 && list[index].delivery_method!=2" @click.stop="confirmorder(list[index].id)">确认收货</view>
				<view class="btn_left" v-if="item.status == 3" @click.stop="appraise(list[index].id)">发表评价</view>
				 <view class="btn_left" v-if="item.status == 1" @click="toservice(list[index].id)">申请售后</view>
				<!-- <view class="btn_left">删除记录</view> -->
				<view class="btn_right"  @click.stop="todetail(list[index].id)" v-if="item.status == 0">去付款</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="zzc" v-if="isShowEwm" @click="isShowEwm = false"></view>
		<!-- 隐藏的二维码 -->
		<view class="hide_ewm" v-if="isShowEwm">
			<!-- <image class="shut" src="@/static/image/shut.png" @click="isShowEwm = false"></image> -->
			<view class="title_box">请凭二维码提货</view>
			<view class="line"></view>
			<image :src="itemcode.pick_code" class="ewm"></image>
			<view class="number">
				<text>订单号</text>
				<text>{{itemcode.order_sn}}</text>
			</view>
		</view>
		<!-- 取消订单 -->
		<cancelOrderCom ref="cancel"></cancelOrderCom>
	</view>
</template>

<script>
import None from '../../components/kong.vue';
import cancelOrderCom from '../../components/cancelgoods.vue';
export default {
	components: { None,cancelOrderCom },
	data() {
		return {
			// 二维码是否显示
			isShowEwm: false,
			titleIndex: -1,
			//0待付款 1待发货/待自提 2待收货/已自提 3待评价  4已取消  5售后退款中  6已完成  7售后完成
			tabbar: [{
				id: -1,
				value: '全部',
				jifen: '全部',
			}, {
				id: 0,
				value: '待付款',
				jifen: '待付款',
			}, {
				id: 1,
				value: '待发货',
				jifen: '待自提',
			}, {
				id: 2,
				value: '待收货',
				jifen: '已自提',
			}, {
				id: 3,
				value: '待评价',
				jifen: '待评价',
			}, {
				id: 5,
				value: '退款/售后',
				jifen: '退款/售后',
			},
			{
				id: 8,
				value: '部分退款',
				jifen: '部分退款',
			},],
			list: [],
			page_index: 1,
			loading: false,
			isEnd: false,
			itemcode:{},
			currindex:'',
			sourcelist:['平台','会员','代理商'],//商品来源0平台 1会员 2代理商
		};
	},
	watch: {
		titleIndex() {
			this.init()
		}
	},
	filters: {
		statusFilter(val) {
			let arr = ['待付款', '待自提', '已自提', '待评价', '已取消', '售后退款中', '已完成', '售后完成']
			return arr[val]
		}
	},
	onLoad(option) {
		this.titleIndex = option.type
		this.currindex = option.currindex //0==物流订单，1==自提订单
		console.log(option,'option')
		this.getList()
	},
	onReachBottom() {
		this.getList()
	},
	async onPullDownRefresh() {
		await this.init()
		uni.stopPullDownRefresh()
	},
	methods: {
		// 取消订单
		cancelOrder(id) {
			this.$refs.cancel.open(id)
		},
		// 顶部导航点击事件
		topNav(item) {
			this.titleIndex = item.id
		},
		// 自提码
		navOrderDatails(item) {
			
			this.itemcode = item
			if(!this.itemcode.pick_code){
				return
			}
			this.isShowEwm = true
		},
		todetail(id){
			console.log(id,'id')
			uni.navigateTo({
				url: "/pageshop/orderdetails/orderdetails?id="+id
			})
		},
		// 查看物流按钮
		logistics() {
			uni.navigateTo({
				url: "/pages/logisticsData/logisticsData"
			})
		},
		// 发表评价按钮
		appraise(id) {
			uni.navigateTo({
				url: "/pageshop/appraise/appraise?id="+id
			})
		},
		getTotal(list) {
			if(list.length==0){
				return 0
			} 
			return list.map(item => item.goods_num).reduce((a, b) => {
				return a + b
			})
		},
		async getList() {
			if (this.loading || this.isEnd) return
			this.loading = true
			try {
				let res = await this.$http({
					url: '/api/Wechat/orderList',
					data: {
						page_index: this.page_index,
						status: this.titleIndex < 0 ? '' : this.titleIndex,
						page_size: 12,
						delivery_method:2//是否自提1否 2是//currindex对于0==物流订单，1==自提订单
					}
				})
				this.list = this.list.concat(res.data)
				this.page_index++
				this.isEnd = res.data.length < 12
				console.log(this.list )
			} catch (err) {

			} finally {
				this.loading = false
			}
		},
		async init() {
			this.page_index = 1
			this.list = []
			this.isEnd = false
			await this.getList()
		},
		//确认收货
		confirmorder(id){
			this.$http({
				url:'/api/Wechat/shipOrder',
				data:{
					token:uni.getStorageSync('token'),
					order_id:id
				}
			}).then(res=>{
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				setTimeout(()=>{
					this.init()
				},1500)
			})
		},
		//售后
		toservice(id){
			uni.navigateTo({
				url:'/pageshop/goodsrefound/goodsrefound?id='+id
			})
		},
	}
}
</script>

<style lang="scss" scoped>
	// 遮罩层
	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background-color: #000;
		opacity: .6;
	}
	// 隐藏的二维码
	.hide_ewm {
		width: 607rpx;
		height: 727rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 70rpx 38rpx 70rpx;
		box-sizing: border-box;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	
		.shut {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 46rpx;
			right: 32rpx;
		}
	
		.title_box {
			height: 128rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 33rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}
	
		.line {
			width: 100%;
			height: 2rpx;
			background: #EEEEEE;
		}
	
		.ewm {
			width: 426rpx;
			height: 426rpx;
		}
	
		.number {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0 24rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
	
			:first-child {
				color: #666666;
			}
	
			:last-child {
				color: #333333;
			}
		}
	}
// 顶部导航
.top_nav {
	display: flex;
	background-color: #fff;
	height: 76rpx;
	width: 100%;
	border-radius: 0 0 10rpx 10rpx;

	.item {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		height: 100%;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;

		.item_view {
			height: 100%;
			display: inline-block;
			position: relative;
			line-height: 76rpx;

			color: #222222;

		}

		.active {

			color: #FF8A9B;

			.gun {
				width: 100%;
				height: 4rpx;
				background: #FF8A9B;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
				position: absolute;
				bottom: 0;
			}
		}
	}
}

// 商品状态
.goods_status {
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 20rpx;
	padding: 38rpx 32rpx 24rpx 28rpx;
	box-sizing: border-box;


	.number {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;

			:first-child {
				color: #555555;
			}
		}

		.right {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FF8A9B;
		}
	}

	.info {
		height: 160rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 36rpx;
		gap: 0 28rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			flex-shrink: 0;
		}

		.title {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.title_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 0 58rpx;

				.title_left {
					font-size: 30rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1em;
				}

				.title_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;

					:first-child {
						font-size: 28rpx;
						font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
						font-weight: normal;
						color: #222222;
						line-height: 1em;
					}

					:last-child {
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #555555;
						line-height: 1em;
						margin-top: 20rpx;
					}
				}
			}

			.small_title {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				line-height: 1em;
			}
		}
	}

	.price {
		text-align: end;
		margin-top: 50rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
		line-height: 1em;

		:first-child {
			color: #555555;
		}
	}

	.btns {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 20rpx;
		margin-top: 46rpx;

		.btn_left {
			width: 170rpx;
			height: 64rpx;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #888888;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			flex-shrink: 0;
		}

		.btn_right {
			width: 170rpx;
			height: 64rpx;
			background: rgba(0, 0, 0, 0);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #FF8A9B;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FF8A9B;
			flex-shrink: 0;
		}
	}
}
</style>
